<template>
  <view v-if="shenheStatus == 0">
    <singleHeader pageTitle="做任务升等级"></singleHeader>

    <template v-if="data">
      <view class="header">
        <image
          v-if="asyncImgs"
          :src="asyncImgs.team_grades.team_grades_bg"
          class="headerBg"
        ></image>
        <view class="header-con">
          <view class="vipName">
            <view>{{ data.user_team_grades.team_grades_level_name }}</view>
          </view>

          <view class="vipNumber">
            <view class="num">{{ data.experience }}</view>
            <view class="des">任务值</view>
          </view>

          <view class="vipLine">
            <view class="line"></view>

            <scroll-view class="scroll" scroll-x>
              <view
                :class="['item', item.is_current ? 'on' : '']"
                v-for="item of data.level_list"
                :key="item.level"
                :style="{
                  width:
                    data.level_list.length < 4
                      ? parseFloat(100 / data.level_list.length).toFixed(2) +
                        '%'
                      : '25%'
                }"
              >
                <view class="name"
                  >{{ item.level_name }} {{ item.experience }}</view
                >
                <view class="yuan"></view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>

      <view class="content">
        <view class="submit-tit bb">
          加速升级攻略
          <view class="tit-icon" @click="showPopup = true">
            <i class="iconfont icon-prompt"></i>
            等级特权
          </view>
        </view>

        <view class="task-list" v-if="data.next_level_info.level_conditions">
          <template v-for="(item, i) of data.next_level_info.level_conditions">
            <view class="submit-tit" v-if="item.is_open">
              {{ titles[i] }}
            </view>

            <template v-if="i == 'man' && item.is_open">
              <view class="item" v-for="(e, o) of item.value" :key="o">
                <view class="let"> +1 </view>
                <view class="des">
                  <template>团队总人数达 {{ e.count }} 人 </template>
                  且
                  <template>团队总订单金额达{{ e.money }}元</template>
                </view>
                <view
                  :class="['button', e.money_finished ? 'disabled' : '']"
                  @click="handleBtn(i, e)"
                >
                  {{ e.money_finished ? "已完成" : "去完成" }}
                </view>
              </view>
            </template>
            <template v-if="i == 'order' && item.is_open">
              <view class="item" v-for="(e, o) of item.value" :key="o">
                <view class="let"> +1 </view>
                <view class="des"> 团队消费金额达到{{ e.count }}元 </view>
                <view
                  :class="['button', e.count_finished ? 'disabled' : '']"
                  @click="handleBtn(i, e)"
                >
                  {{ e.count_finished ? "已完成" : "去完成" }}
                </view>
              </view>
            </template>
            <template v-if="i == 'self' && item.is_open">
              <view class="item">
                <view class="let"> +1 </view>
                <view class="des">
                  消费{{
                    (item.value.order_number == "0" ? "累计达到" : "单比达到") +
                    item.value.price
                  }}元
                </view>
                <view
                  :class="['button', item.value_finished ? 'disabled' : '']"
                  @click="handleBtn(i, item)"
                >
                  {{ item.value_finished ? "已完成" : "去完成" }}
                </view>
              </view>
            </template>
            <template v-if="i == 'recharge' && item.is_open">
              <view class="item">
                <view class="let"> +1 </view>
                <view class="des"> 充值金额达到{{ item.value }}元 </view>
                <view
                  :class="['button', item.value_finished ? 'disabled' : '']"
                  @click="handleBtn(i, item)"
                >
                  {{ item.value_finished ? "已完成" : "去完成" }}
                </view>
              </view>
            </template>
            <template v-if="i == 'goods' && item.is_open">
              <view class="item">
                <view class="let"> +1 </view>
                <view class="des"> 购买指定商品 </view>
                <view
                  :class="['button', item.value_finished ? 'disabled' : '']"
                  @click="handleBtn(i, item)"
                >
                  {{ item.value_finished ? "已完成" : "去完成" }}
                </view>
              </view>
            </template>
          </template>
        </view>
      </view>

      <view
        class="tools-pof"
        v-if="!data.next_level_info || data.next_level_info.is_open_apply"
      >
        <view :class="['button', hasDisabled]" @click="submit">{{
          hasDisabled
            ? "升级任务未达成"
            : `申请成为${data.next_level_info.level_name}会员`
        }}</view>
      </view>

      <u-popup
        v-model="showPopup"
        mode="center"
        @close="showPopup = false"
        closeable
        border-radius="12"
      >
        <view class="pop-scroll">
          <scroll-view scroll-y>
            <u-parse :html="getHtml"></u-parse>
          </scroll-view>
        </view>
      </u-popup>
    </template>

    <transitionPage></transitionPage>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { getUpgradeCondition } from "@/api/teamGrades.js";

export default {
  components: {
    Shenhe
  },
  data() {
    return {
      data: null,
      titles: {
        man: "团队人数",
        order: "团队订单",
        self: "消费金额",
        recharge: "充值金额",
        goods: "购买指定商品"
      },
      showPopup: false
    };
  },
  computed: {
    getHtml() {
      try {
        return this.$utils.formatRichText(this.data.next_level_info.desc);
      } catch (error) {
        return "";
      }
    },
    hasDisabled() {
      let { data } = this;
      if (
        data &&
        (!data.next_level_info.level_conditions ||
          !data.next_level_info.is_finished)
      ) {
        return "disabled";
      }

      return "";
    }
  },

  methods: {
    handleBtn(el, item) {
      switch (el) {
        case "recharge":
          this.$utils.toUrl("/user/balance/recharge");
          break;

        case "goods":
          if (!item.value_finished)
            this.$utils.toUrl(`/goods/goods/goods?id=${item.value.id[0]}`);
          break;

        default:
          this.$utils.toUrl("/pages/home/home", "switchtab");
          break;
      }
    },

    submit() {
      if (this.hasDisabled == "disabled") return;

      this.$utils.toUrl("/tools/teamGrades/apply");
    }
  },

  onLoad() {},
  onShow() {
    getUpgradeCondition().then((res) => {
      if (!res.code) this.data = res.data;
    });
  }
};
</script>

<style lang="scss" scoped>
.header {
  position: relative;
}

.headerBg {
  display: block;
  width: 100%;
}

.header-con {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 24rpx;
}

::v-deep {
  .hold-place {
    display: none;
  }

  .page-header {
    background: none !important;
  }
}

.vipName {
  padding-bottom: 30rpx;
  view {
    display: inline-block;
    padding: 4rpx 12rpx;
    border-radius: 32px;
    background: #fff9eb;
    font-size: 24rpx;
    color: #b66500;
    font-weight: bold;
  }
}

.vipNumber {
  display: flex;
  align-items: center;
  color: #b66500;
  font-size: 24rpx;

  .num {
    padding-right: 10rpx;
    font-size: 56rpx;
    font-weight: bold;
  }

  .des {
    padding-top: 10rpx;
  }
}

.vipLine {
  position: relative;
  width: 100%;
  margin-bottom: 26rpx;
  padding-bottom: 30rpx;

  .scroll {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  // flex: 1;
  // padding: 10rpx 0 88rpx;

  .line {
    position: absolute;
    left: 0;
    right: 0;
    top: 4rpx;
    height: 8rpx;
    background: #d79c50;
    border-radius: 12px;
  }

  .item {
    position: relative;
    display: inline-block;
    padding-top: 24rpx;
    width: 25%;
    text-align: center;

    // height: 8rpx;

    &.on {
      &:after,
      .yuan {
        opacity: 1;
      }
    }

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 4rpx;
      width: 100%;
      height: 8rpx;
      background: #b66500;
      opacity: 0;
    }

    &:before,
    .yuan {
      content: "";
      position: absolute;
      right: 0;
      top: 0rpx;
      z-index: 3;
      width: 16rpx;
      height: 16rpx;
      border-radius: 32px;
    }

    &:before {
      background: #d79c50;
    }

    .yuan {
      background: #b66500;
      opacity: 0;
    }

    &:last-of-type {
      &:before,
      .yuan {
        display: none;
      }
    }

    .name {
      font-size: 24rpx;
      color: #d69c4e;
    }
  }
}

.content {
  position: relative;
  z-index: 3;
  margin-top: -20rpx;
  padding: 0 24rpx;
  border-radius: 24rpx 24rpx 0 0;
  background: #fff;
}

.submit-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  font-weight: bold;
  font-size: 30rpx;

  &.bb {
    border-bottom: 1px solid #f8f8f8;
  }

  .tit-icon {
    display: flex;
    align-items: center;
    font-weight: normal;
    font-size: 24rpx;
    color: #b66500;

    .iconfont {
      position: relative;
      top: 2rpx;
      margin-right: 6rpx;
    }
  }
}

.task-list {
  .item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
  }

  .let {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66rpx;
    height: 66rpx;
    background: linear-gradient(140deg, #fef8e7 0%, #fae5a1 100%);
    border-radius: 32px;
    border: 2rpx solid #f8d78c;
    color: #3b1e05;
  }

  .des {
    padding: 0 16rpx;
    flex: 1;
    color: #262626;
  }

  .button {
    width: 136rpx;
    height: 58rpx;
    font-size: 24rpx;
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #f7e1c2 0%, #f2bc6e 100%);
  border-radius: 32px;
  color: #754e19;
  font-weight: bold;

  &.disabled {
    opacity: 0.5;
  }
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10rpx 36rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
  text-align: right;
  border-top: 2rpx solid #f8f8f8;

  .button {
    height: 76rpx;
  }
}

.pop-scroll {
  padding: 60rpx 20rpx 20rpx;
  width: 90vw;
  height: 70vh;

  scroll-view {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
